<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>抄表</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/lrz.bundle.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="primary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				抄表
			</mu-appbar>
			<mu-container style="padding-top: 76px;">
				<div style="margin-top: 30px;display: flex;flex-direction: column;align-items: center;">
					<strong style="color: red;font-size: 18px;">填写读值时只需填写小数点前面部分</strong>
					<mu-text-field v-model="meterValue" color="primary" type="number" label="请输入燃气表当前读值" suffix="m³" label-float
					 full-width :max-length="length"></mu-text-field><br />
					 <div v-if="!imgPath" style="width: 200px;height: 200px;display: flex;align-items: center;justify-content: center;border: 1px solid #C0C0C0;flex-direction: column;"
					  @click="takePhoto()">
					 	请对燃气表拍照
					 	<div>保证读值清晰可见</div>
					 	<img src="img/meter.png" />
					 	点击开始
					 </div>
					 <img v-else :src="imgPath" style="width: 200px;height: 200px;" @click="takePhoto()" />
					 <mu-button color="secondary" full-width style="margin-top: 30px;" @click="goScan()">智能识别
					 </mu-button>
					<mu-button color="primary" full-width style="margin-top: 30px;" @click="recordMeter()">提交<mu-icon value="arrow_forward" right></mu-icon>
					</mu-button>
				</div>
				<div v-if="building!=null" style="margin-top: 30px;color: red;">提示：本表每次抄表开始日期为{{building.recordGasMeterStartDay}}-{{building.recordGasMeterEndDay}}日，抄表周期为{{building.recordGasMeterTimes}}月/次</div>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					type: 1,
					meterValue: "",
					imgPath: "",
					building:null,
					meterId:0,
					length:0,
					meterType:{
						valueLength:0,
						decimalLength:0
					}
				}
			},
			watch:{
				meterValue:function (newValue,oldValue) {
					if(newValue.length>this.length){
						this.meterValue = oldValue
					}
				}
			},
			methods: {
				recordMeter(){
					if(!this.meterValue){
						util.tip("请输入燃气表读值!");
						return;
					}
					if(!this.imgPath){
						util.tip("请对燃气表拍照!");
						return;
					}
					var params = {
						meterId:this.meterId,
						meterValue:this.meterValue,
						base64:this.imgPath.substring(this.imgPath.indexOf(",") + 1, this.imgPath.length)
					}
					util.ajax("/meter/recordMeter",params,data=>{
						if(data.code==1){
							alert(data.msg);
							var lastWebview = plus.webview.getWebviewById("my_building_meter_chaobiao.html");
							lastWebview.evalJS("vm.refresh()")
							var indexWebView = plus.webview.getWebviewById("index.html");
							indexWebView.evalJS("vm.getWaitingDoList()")
							util.back();
						}else{
							util.tip(data.msg,5000);
						}
					},true)
				},
				getMeterTypeByMeterId(){
					var params = {
						meterId:this.meterId
					}
					util.ajax("/api/method/getMeterTypeByMeterId",params,data=>{
						this.meterType = data.object[0];
						this.length = this.meterType.valueLength-this.meterType.decimalLength
					})
				},
				getBuildingByMeterId(){
					var params = {
						meterId:this.meterId
					}
					util.ajax("/api/method/getBuildingByMeterId",params,data=>{
						this.building = data.object[0];
					})
				},
				goScan() {
					util.setData("valueLength",this.meterType.valueLength)
					util.openWindow('scan.html')
				},
				takePhoto() {
					plus.camera.getCamera().captureImage(function(p) {
						plus.io.resolveLocalFileSystemURL(p, function(entry) {
							var localurl = entry.toLocalURL();
							vm.appendFile(localurl);
						});
					});
				},
				appendFile(path) {
					lrz(path).then(function(rst) {
						vm.imgPath = rst.base64;
						// upload(rst.base64.split(';base64,')[1]);
					})
				},
				setMeterValue(){
					var value = util.getData("scan_value");
					this.meterValue = value.substring(0,this.length);
					this.imgPath = util.getData("scan_imgPath");
				}
			}
		})
		document.addEventListener('plusready', function() {
			vm.meterId = util.getData("meterId");
			vm.getBuildingByMeterId();
			vm.getMeterTypeByMeterId();
			mui.preload({
				url: "scan.html",
				id: "scan.html", //默认使用当前页面的url作为id
				styles: {}, //窗口参数
				extras: {} //自定义扩展参数
			});
		});
	</script>
</html>
